<template>
	<view class="poRel hPer100">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="消息中心" @topTotalHeight="topTotalHeight"
		></navbar>
		<view class="disFlex flDirColumn" :style="'height: ' + 'calc(100vh - ' + calcNum + 'px);'">
			<view class="disFlex teAliCenter h168r aliItCenter borB1SE6e6e6">
				<view class="flex1" @click="cliNotice(1)">
					<view class="poRel w80r h80r mAuto mb10r">
						<image :src="baseUrl + 'iconNotice.png'" mode="aspectFit"
							class="wPer100 hPer100"
						></image>
					</view>
					系统群发
				</view>
				<view class="flex1" @click="cliNotice(2)">
					<view class="poRel w80r h80r mAuto mb10r">
						<image :src="baseUrl + 'iconTeaHouse.png'" mode="aspectFit"
							class="wPer100 hPer100"
						></image>
					</view>
					订单通知
				</view>
				<view class="flex1" @click="cliNotice(3)">
					<view class="poRel w80r h80r mAuto mb10r">
						<image :src="baseUrl + 'iconVipPenple.png'" mode="aspectFit"
							class="wPer100 hPer100"
						></image>
					</view>
					会员通知
				</view>
			</view>
			<view class="flex1 overYS">
				<scroll-view 
					class="hPer100 poRel" scroll-y="true" @scrolltolower="orderScroll"
					:refresher-enabled="true" @refresherrefresh="orderRefresh" :refresher-triggered="ordertri0"
				>
					<informationList :infoDataList="detailedList0" :infoMore="noMore0"
					></informationList>
				</scroll-view>
			</view>
		</view>
		<view class="poAbs wPer100 left0 zIndex1 backColrgba255a255a255a0s9"
			v-if="!token"
			:style="'height: ' + 'calc(100vh - ' + calcNum + 'px);top: ' + calcNum + 'px;'"
		>
			<navigator class="w300r teAliCenter f28r backImgLiGrTR2c6739a99c043 lh80r colFff borRad40r poAbs top50P left50P trTrn50Pn50P"
				url="/pages/personalCenter/login?type=2"
			>
				立即登录
			</navigator>
		</view>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import { baseUrl } from '@/utils/request.js'
import { getMemberMsgList } from '@/utils/api.js'
import informationList from '@/components/informationList.vue'
export default {
	components: { navbar, informationList },
	data() {
		return {
			token: '',
			calcNum: 0,
			baseUrl,
			ordertri0: false, detailedList0: [], noMore0: false, page0: 0,
		}
	},
	onShow() {
		// #ifdef MP-WEIXIN
			const token = uni.getStorageSync('token');
		// #endif
		// #ifdef H5
			const token = '2eae0f660b498bdc724dee1efa63407e';
			uni.setStorage({
				key: 'token', data: token
			})
		// #endif
		if(token) {
			this.token = token;
			this.noMore0 = false;
			this.page0 = 0;
			this.getDataList1(0, '', 1);
		}else {
			this.token = '';
			this.noMore0 = false;
			this.page0 = 0;
			this.detailedList0 = [];
			uni.removeTabBarBadge({ index: 3 });
		}
	},
	onShareAppMessage(res) {
	    if (res.from === 'button') {
	        console.log(res.target)
	    }
	    return {
	        title: '山雀壹®共享茶室',
			imageUrl: '/static/images/logo.png',
	        path: '/pages/newsTab/index',
	        mpId: 'wxf8003ea15566ecd1'
	    }
	},
	onShareTimeline(res) {
	    return {
	        title: '山雀壹®共享茶室',
	        type: 0,
	        summary: "",
	    }
	},
	methods: {
		topTotalHeight(height) {
			// #ifdef MP-WEIXIN
				this.calcNum = height;
			// #endif
			// #ifdef H5
				this.calcNum = 50;
			// #endif
		},
		cliNotice(type) {
			uni.navigateTo({
				url: '/pages/newsTab/noticeList?type=' + type
			})
		},
		getDataList1(page, type, is_read, callBack) {
			uni.showLoading({ title: '加载中...' })
			getMemberMsgList({
				token: this.token, number: 10,
				page, type, is_read
			}).then(res => {
				if(page > 0) {
					this.detailedList0 = this.detailedList0.concat(res.data.data);
				}else {
					this.detailedList0 = res.data.data;
				}
				if(res.data.number < 10) this.noMore0 = true;
				if(res.data && res.data.count) {
					uni.setTabBarBadge({
						index: 3,
						text: res.data.count < 100 ? res.data.count + '' : '99+'
					});
				}else {
					uni.removeTabBarBadge({ index: 3 });
				}
				uni.hideLoading();
				if(callBack) callBack();
			})
		},
		orderScroll() {
			if(!this.noMore0) {
				this.page0 += 1;
				this.getDataList1(this.page0, '', 1);
			}
		},
		orderRefresh() {
			if(!this.ordertri0) {
				this.ordertri0 = true;
				this.noMore0 = false;
				this.page0 = 0;
				this.getDataList1(0, '', 1, () => {
					this.ordertri0 = false;
				})
			}
		}
	}
}
</script>
<style>
page {background-color: white;}
</style>